// a little question-mark button that reveals a lenghtier explanation
// to the context
.more-link {
  margin: 0px 4px;
  display: inline;
  vertical-align: text-bottom;

  .btn {
    @extend .btn-embed;
    color: currentColor;
  }

  svg {
    width: 1em;
    height: 1em;
  }
}

.more-popover .popover-content {
  white-space: normal;
  // minimal pixel height of the screen is 768 and in the worst case a
  // vertically placed popover has a reference point almost in the middle
  // of the screen so the max height shouldn't be bigger than
  // (768 / 2) - <height of the arrow> - <height of the header>
  max-height: 300px;
  overflow-y: auto;

  ul {
    padding: 0 0 0 1.8em;

    li {
      margin: 0 0 0.4em 0;
    }
  }
}

.more-popover .popover-content p {
  margin: 0 0 5px;
}

.more-footer {
  // since the footer is actually placed within popover-content (can't be helped)
  // need a negative margin to offset the padding. Too bad that padding is hard-coded
  // instead of a variable...
  margin: 9px -14px -9px;
  padding: 9px 14px;
  font-size: 1em;
  background-color: $popover-title-bg;
  border-top: 1px solid darken($popover-title-bg, 5%);
}
